        <div class="body-wrap">
        <div class="top-tools">
            <a class="inner-link" href="#Ext.KeyNav-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
            <a class="inner-link" href="#Ext.KeyNav-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
            <a class="inner-link" href="#Ext.KeyNav-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
                            <a class="inner-link" href="#Ext.KeyNav-configs"><img src="../resources/images/default/s.gif" class="item-icon icon-config">Config Options</a>
                        <a class="bookmark" href="../docs/?class=Ext.KeyNav"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
        </div>
                <h1>Class Ext.KeyNav</h1>
        <table cellspacing="0">
            <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
            <tr><td class="label">Defined In:</td><td class="hd-info">KeyNav.js</td></tr>
            <tr><td class="label">Class:</td><td class="hd-info">KeyNav</td></tr>
                                    <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
                    </table>
        <div class="description">
            <p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
navigation keys to function calls that will get called when the keys are pressed, providing an easy
way to implement custom navigation schemes for any UI component.</p>
<p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
pageUp, pageDown, del, home, end.  Usage:</p>
 <pre><code>var nav = <b>new</b> Ext.KeyNav(<em>"my-element"</em>, {
    <em>"left"</em> : <b>function</b>(e){
        <b>this</b>.moveLeft(e.ctrlKey);
    },
    <em>"right"</em> : <b>function</b>(e){
        <b>this</b>.moveRight(e.ctrlKey);
    },
    <em>"enter"</em> : <b>function</b>(e){
        <b>this</b>.save();
    },
    scope : <b>this</b>
});</code></pre>        </div>
        
        <div class="hr"></div>
                <a id="Ext.KeyNav-configs"></a>
        <h2>Config Options</h2>
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Config Options</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="config-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.KeyNav-defaultEventAction"></a>
            <b>defaultEventAction</b> : String            <div class="mdesc">
                        <div class="short">The method to call on the Ext.EventObject after this KeyNav intercepts a key. Valid values are Ext.EventObject.stopEv...</div>
            <div class="long">
                The method to call on the <a ext:cls="Ext.EventObject" href="output/Ext.EventObject.html">Ext.EventObject</a> after this KeyNav intercepts a key. Valid values are <a ext:cls="Ext.EventObject" ext:member="stopEvent" href="output/Ext.EventObject.html#stopEvent">Ext.EventObject.stopEvent</a>, <a ext:cls="Ext.EventObject" ext:member="preventDefault" href="output/Ext.EventObject.html#preventDefault">Ext.EventObject.preventDefault</a> and <a ext:cls="Ext.EventObject" ext:member="stopPropagation" href="output/Ext.EventObject.html#stopPropagation">Ext.EventObject.stopPropagation</a> (defaults to 'stopEvent')            </div>
                        </div>
        </td>
        <td class="msource">KeyNav</td>
    </tr>
        <tr class="config-row alt">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.KeyNav-disabled"></a>
            <b>disabled</b> : Boolean            <div class="mdesc">
                            True to disable this KeyNav instance (defaults to false)                        </div>
        </td>
        <td class="msource">KeyNav</td>
    </tr>
        <tr class="config-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.KeyNav-forceKeyDown"></a>
            <b>forceKeyDown</b> : Boolean            <div class="mdesc">
                        <div class="short">Handle the keydown event instead of keypress (defaults to false). KeyNav automatically does this for IE since IE does...</div>
            <div class="long">
                Handle the keydown event instead of keypress (defaults to false). KeyNav automatically does this for IE since IE does not propagate special keys on keypress, but setting this to true will force other browsers to also handle keydown instead of keypress.            </div>
                        </div>
        </td>
        <td class="msource">KeyNav</td>
    </tr>
            </table>
                <a id="Ext.KeyNav-props"></a>
        <h2>Public Properties</h2>
        <div class="no-members">This class has no public properties.</div>        <a id="Ext.KeyNav-methods"></a>
        <h2>Public Methods</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Method</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="method-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.KeyNav-KeyNav"></a>
            <b>KeyNav</b>(&nbsp;<code>Mixed el</code>, <code>Object config</code>&nbsp;)            <div class="mdesc">
                        <div class="short"></div>
            <div class="long">
                    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li><code>el</code> : Mixed<div class="sub-desc">The element to bind to</div></li><li><code>config</code> : Object<div class="sub-desc">The config</div></li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code></code></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">KeyNav</td>
    </tr>
        <tr class="method-row alt expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.KeyNav-disable"></a>
            <b>disable</b>() : void            <div class="mdesc">
                        <div class="short">Disable this KeyNav</div>
            <div class="long">
                Disable this KeyNav    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li>None.</li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>void</code></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">KeyNav</td>
    </tr>
        <tr class="method-row expandable">
        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>
        <td class="sig">
        <a id="Ext.KeyNav-enable"></a>
            <b>enable</b>() : void            <div class="mdesc">
                        <div class="short">Enable this KeyNav</div>
            <div class="long">
                Enable this KeyNav    <div class="mdetail-params">
        <strong>Parameters:</strong>
        <ul><li>None.</li>        </ul>
        <strong>Returns:</strong>
        <ul>
            <li><code>void</code></li>
        </ul>
    </div>
                </div>
                        </div>
        </td>
        <td class="msource">KeyNav</td>
    </tr>
            </table>
                <a id="Ext.KeyNav-events"></a>
        <h2>Public Events</h2>
        <div class="no-members">This class has no public events.</div>
        </div>